<eda-dialog [inject]="dialog">

  <div body class="grid" style=" height: 100%;">
    <div class="col-9">

        <div class="eda-chart-panel" style=" width: 100%; background-color: var(--panel-color);">
          <panel-chart *ngIf="display" #PanelChartComponent [props]="panelChartConfig"  style="height: 100%; width: 100%; display:block;  margin-top:1em">
          </panel-chart>
        </div>

    </div>


    <div class="col-3">


      <h6 i18n="@@colorsChartH6" class="custom-border-b1">
        Colores
      </h6>

      <div class="chart-color-selection">
        <div class="mb-1">
          <input type="text" [(ngModel)]="color" pInputText style="width: 40%" (keyup)="handleInputColor()" />
          <p-colorPicker [(ngModel)]="color" appendTo="body" (onChange)="handleInputColor()"></p-colorPicker>
          <!-- <input type="text" pInputText class="eda-color-pick" (input)="handleInputColor()" minlength="7"> -->
        </div>

      </div>

      <h6 i18n="@@LogarithmicScaleH6" class="custom-border-b1">
        ¿Escala logaritmica?
      </h6>
      <div class="mb-1">
        <p-inputSwitch [(ngModel)]="logarithmicScale" (onChange)="renderMap()">
        </p-inputSwitch>
      </div>
      <h6 i18n="@@noMouseH6" class="custom-border-b1">
        Activar funciones del mouse
      </h6>
      <div class="mb-1">
        <p-inputSwitch [(ngModel)]="draggable" (onChange)="nullMouseOptions()">
        </p-inputSwitch>
      </div>
      
      <h6 i18n="@@noBaseLayerH6" class="custom-border-b1">
        Activar capa base
      </h6>
      <div class="mb-1">
        <p-inputSwitch [(ngModel)]="baseLayer" (onChange)="modifyBaseLayer()">
        </p-inputSwitch>
      </div>
      
      <h6 i18n="@@LegendPosition" class="custom-border-b1">
        Posición de la leyenda
      </h6>

      <div class="col-3" style="border: 1px solid #fbfbfb; border-radius: 10px; background-color: #f2f3f5;">
        <div class="grid">
          <div class="col-6" style="text-align: left;">
            <p-radioButton name="groupname" value="topleft" [(ngModel)]="legendPosition" (onClick)="changeLegend()">
            </p-radioButton>
          </div>
          <div class="col-6" style="text-align: right;">
            <p-radioButton name="groupname" value="topright" [(ngModel)]="legendPosition" (onClick)="changeLegend()">
            </p-radioButton>
          </div>
        </div>

        <div class="grid">
          <div class="col-6" style="text-align: left;">
            <p-radioButton name="groupname" value="bottomleft" [(ngModel)]="legendPosition" (onClick)="changeLegend()">
            </p-radioButton>
          </div>
          <div class="col-6" style="text-align: right">
            <p-radioButton name="groupname" value="bottomright" [(ngModel)]="legendPosition" (onClick)="changeLegend()">
            </p-radioButton>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div footer>
    <div class="ui-dialog-buttonpanel ui-widget-content ui-helper-clearfix text-right">
      <button type="submit" pButton (click)="saveChartConfig()" icon="fa fa-check"
        class="p-button-raised p-button-success" i18n-label="@@guardarButton" label="Confirmar"
        id="eda_chart_dialog_confirmar">
      </button>
      <button type="button" pButton (click)="closeChartConfig()" icon="fa fa-times"
        class="p-button-raised p-button-danger" i18n-label="@@cancelarButton" label="Cancelar">
      </button>
    </div>
  </div>
</eda-dialog>